<template>
	<view class="equip-task-detail">
		<!-- <uni-nav-bar :title="'<aaa></aaa>'"></uni-nav-bar> -->
		<uni-nav-bar
			color="#ffffff"
			background-color="#007AFF"
			:fixed="true"
			:status-bar="true"
			:rightText="saveBtnText"
			left-icon="arrowleft"
			left-text=""
			title="详情"
			@clickRight="onSave"
			@clickLeft="onPageBack"
		/>

		<view class="task-info">
			<view class="task-info-item">
				<view class="task-info-item-title">任务编码</view>
				<view class="task-info-item-text">{{ equip.task_code }}</view>
			</view>
			<view class="task-info-item">
				<view class="task-info-item-title">设备编码</view>
				<view class="task-info-item-text">{{ equip.eqp_id }}</view>
			</view>
			<view class="task-info-item">
				<view class="task-info-item-title">执行状态</view>
				<view class="task-info-item-text">
					<view v-if="task_status.doStatus == 2">已完成</view>
					<view v-else-if="task_status.doStatus == 1">进行中</view>
					<view v-else>未开始</view>
				</view>
			</view>
			<view class="task-info-item">
				<view class="task-info-item-title">执行结果</view>
				<view class="task-info-item-text">
					<!-- <picker
						class="picker"
						@change="
							e => {
								task_status.do_result = e.target.value;
							}
						"
						:value="task_status.do_result"
						:range="['未判定', '合格', '不合格']"
					>
						<view v-if="equip.do_result == 0">未判定</view>
						<view v-else-if="equip.do_result == 1">合格</view>
						<view v-else-if="equip.do_result == 2">不合格</view>
					</picker> -->
					<view v-if="task_status.doResult == 0">未判定</view>
					<view v-else-if="task_status.doResult == 1">合格</view>
					<view v-else-if="task_status.doResult == 2" class="text-red">不合格</view>
				</view>
			</view>
			<view class="task-info-item">
				<view class="task-info-item-title">开始时间</view>
				<view class="task-info-item-text">{{ equip.start_dt }}</view>
			</view>
		</view>
	 
		<view class="item-list">
			<view :id="'equip-task-item' + item.id" class="item-li cu-list" v-for="item in itemList" :key="item.id">
				<!-- <view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="cuIcon-title text-orange"></text>
						<text>{{ item.item_name }}</text>
					</view>
					<viwe class="content">
						<text>基准/描述</text>
					</viwe>
					
				</view> -->

				<view class="cu-list menu">
					<view class="cu-item">
						<view class="content padding-tb-sm">
							<view>
								<!-- <text class="cuIcon-clothesfill text-blue margin-right-xs"></text>
								<text></text> -->
								<text class="cuIcon-title text-orange"></text>
								<text>{{ item.item_name }}</text>
							</view>
							<view class="text-gray text-sm">
								<text class="cuIcon-infofill margin-right-xs"></text>
								<text>{{ item.remark }}</text>
							</view>
						</view>
						<view class="action">
							<text>
								<text class="cu-tag round bg-olive light" v-if="item.input_type == 1">【定性】</text>
								<text class="cu-tag round bg-blue light" v-else>【定量】</text>
							</text>
						</view>
					</view>

					<view>
						<view class="cu-list grid col-4 ">
							<view class="cu-item task-item-item">
								<label class="cu-item task-item-item">
									<text class="title">
										<text class="text-edit-tag text-blue text-xs cu-tag badge cuIcon-edit bg-white"></text>
										部件前状态
									</text>

									<view class="text">
										<picker
											:disabled="isConfirm"
											class="picker"
											@change="
												e => {
													item.pre_status = e.target.value;
												}
											"
											:value="item.pre_status"
											:range="['不合格', '合格', '临界']"
										>
											<view v-if="item.pre_status == 0">不合格</view>
											<view v-else-if="item.pre_status == 1">合格</view>
											<view v-else-if="item.pre_status == 2">临界</view>
										</picker>
									</view>
								</label>
							</view>
							<view class="cu-item task-item-item">
								<text class="title">检验人</text>
								<view class="text"></view>
							</view>

							<view class="cu-item task-item-item">
								<text class="title">取值范围</text>
								<view class="text">{{ item.minimum }}~{{ item.maximum }}</view>
							</view>

							<view class="cu-item task-item-item">
								<text class="title">标准值</text>
								<view class="text">{{ item.standard }}</view>
							</view>
							<view class="cu-item task-item-item" @tap="showPropmt(item, 'check_text', '维护内容')">
								<text class="title">
									<text class="text-edit-tag text-blue text-xs cu-tag badge cuIcon-edit bg-white"></text>
									维护内容
								</text>
								<view class="text">{{ item.check_text }}</view>
							</view>
							<view class="cu-item task-item-item" @tap="showPropmt(item, 'bkinfo', '备件信息')">
								<text class="title">
									<text class="text-edit-tag text-blue text-xs cu-tag badge cuIcon-edit bg-white"></text>
									备件信息
								</text>
								<view class="text">{{ item.bkinfo }}</view>
							</view>
							<view class="cu-item task-item-item" @tap="showPropmt(item, 'ckeck_val', '检测值', 'number')">
								<text class="title">
									<text v-if="item.input_type != 1" class="text-edit-tag text-blue text-xs cu-tag badge cuIcon-edit bg-white"></text>
									检测值
								</text>
								<view class="text">
									<!-- <input type="number" v-model="item.ckeck_val" > -->
									{{ item.ckeck_val }}
								</view>
							</view>
							<view class="cu-item task-item-item">
								<text class="title">
									<text class="text-edit-tag text-blue text-xs cu-tag badge cuIcon-edit bg-white"></text>
									检测结果
								</text>
								<view class="text">
									<!--  -->
									<picker
										:disabled="isConfirm"
										class="picker"
										@change="
											e => {
												item.ckeck_flag = e.target.value;
											}
										"
										:value="item.ckeck_flag || 0"
										:range="['未判定', '合格', '不合格']"
									>
										<view v-if="item.ckeck_flag == '1'">合格</view>
										<view v-else-if="item.ckeck_flag == '2'">不合格</view>
										<view v-else>未判定</view>
									</picker>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="padding flex flex-direction" v-if="itemList.length"><button class="cu-btn bg-red margin-tb-sm lg" @click="onSave">保存</button></view> -->
		<view class="cu-modal" :class="prompt.visible ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请输入{{ prompt.title }}</view>
				</view>
				<view class="padding-xl">
					<view class="cu-form-group margin-top"><input placeholder="" :focus="prompt.visible" v-model="prompt.value" name="input"  /></view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hidePropmt">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="onPromptOk">确认</button>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="confirmResultModal.visible ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end"><view class="content">是否通过执行结果</view></view>
				<view class="block" style="padding: 10rpx 0;">
					<radio-group @change="evt => (confirmResult = evt.target.value)">
						<label class="cu-form-group">
							<view class="title">通过</view>
							<view><radio value="1" :checked="confirmResult == 1" class="green" :class="{checked:confirmResult == 1}"  /></view>
						</label>
						
						<label class="cu-form-group">
							<view class="title">不通过</view>
							<view><radio value="2" :checked="confirmResult == 2" class="red" :class="{checked:confirmResult == 2}" /></view>
						</label>
					</radio-group>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="() => (confirmResultModal.visible = false)">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="onConfirmResultOk">确认</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/serveices/device-api.js';
import util from '@/serveices/util.js';
export default {
	onNavigationBarButtonTap(e) {
		console.log(e);
		this.onSave();
	},
	onShow(){
		//#ifdef APP-PLUS
		// plus.screen.lockOrientation('landscape');
		//#endif
	},
	data() {
		return {
			equip: {},
			// 1通过2未通过
			confirmResult: 1,
			confirmResultModal: {
				visible: false
			},
			itemList: [],
			prompt: {
				value: '',
				type: 'text',
				title: '',
				visible: false,
				key: '',
				taskItem: {}
			}
		};
	},
	computed: {
		saveBtnText() {
			// 确认状态
			if (this.isConfirm) return '确认';
			else if (parseInt(this.equip.do_status) < 2) return '保存';
			return '';
		},
		task_status() {
			const arg = {};
			//1. 维护项全部合格
			let hasOk = false;
			let hasNotOk = false;
			let hasUnkown = false;
			this.itemList.forEach(item => {
				if (item.ckeck_flag == 1) hasOk = true;
				else if (item.ckeck_flag == 2) hasNotOk = true;
				else hasUnkown = true;
			});

			// 全部未判定
			if (hasUnkown) {
				if (hasOk || hasNotOk) {
					// 有未判定 && 有合格或者不合格。 状态-> 进行中，结论->待定
					arg.doStatus = 1;
					arg.doResult = 0;
				} else {
					// 全部未判定.   状态-> 未开始0，结论->待定
					arg.doStatus = 0;
					arg.doResult = 0;
				}
			} else {
				if (hasNotOk) {
					//全部判定 && 有不合格 .状态-> 进行中，结论->不合格
					arg.doStatus = 2;
					arg.doResult = 2;
				} else {
					//全部合格
					arg.doStatus = 2;
					arg.doResult = 1;
				}
			}
			return arg;
		},
		isConfirm() {
			const ret = this.equip.confirm_code && this.equip.confirm_code != '0';
			console.log(ret)
			return !!ret
		}
	},

	methods: {
		onPageBack() {
			uni.navigateBack();
		},
		hidePropmt() {
			this.prompt.visible = false;
		},
		showPropmt(taskItem, key, title, type) {
			// 班组长确认与维护 只读
			if (this.isConfirm) return;

			this.prompt.taskItem = taskItem;
			this.prompt.key = key;
			this.prompt.title = title;
			this.prompt.value = taskItem[key];
			this.prompt.visible = true;
			this.prompt.type = type || 'text';
		},
		onPromptOk() {
			if (this.prompt.type === 'number') {
				if (isNaN(this.prompt.value)) {
					//非数字
					uni.showToast({
						title: '请输入合法的数字',
						icon: 'none'
					});
					return;
				}
			}
			this.prompt.taskItem[this.prompt.key] = this.prompt.value;
			if (this.prompt.key == 'ckeck_val' && this.prompt.taskItem.input_type == 2) {
				// 输入的检测值 && 类型为 定量时，修改当前结论
				const { maximum, minimum } = this.prompt.taskItem;
				const val = parseFloat(this.prompt.value);
				if (isNaN(val)) {
					// 输入的值非法
					this.prompt.value = '';
					this.prompt.taskItem[this.prompt.key] = '';
				} else {
					if (!isNaN(maximum) && !isNaN(minimum)) {
						if (val >= minimum && val <= maximum) {
							this.prompt.taskItem.ckeck_flag = 1;
						} else {
							this.prompt.taskItem.ckeck_flag = 2;
						}
					}
				}
			}

			this.hidePropmt();
		},
		onSave() {
			if (!this.saveBtnText) return;
			if (this.isConfirm) {
				this.confirmResultModal.visible = true;
			} else {
				// 提交
				const arg = {
					keyValue: this.equip.id,
					doStatus: 0,
					doResult: 0,
					rowsData: this.itemList
				};
				arg.doStatus = this.task_status.doStatus;
				arg.doResult = this.task_status.doResult;

				api.dealequipmenttask(arg)
					.then(res => {
						util.playSuccess();
						uni.$emit('onEquipTaskDetailSave', { id: this.equip.id });
						setTimeout(() => {
							uni.navigateBack();
						}, 300);
					})
					.catch(err => {
						util.playFailed();
					});
			}
		},
		onConfirmResultOk() {
			//班长 质量确认
			api.equipmenttaskconfirm({
				keyValue: this.equip.id,
				confirmType: this.equip.confirm_code, //this.equip.confirm_type,
				confirmResult: this.confirmResult
			})
				.then(r => {
					util.playSuccess();
					uni.$emit('onEquipTaskDetailSave', { id: this.equip.id });
					setTimeout(() => {
						uni.navigateBack();
					}, 300);
				})
				.catch(err => {
					util.playFailed();
				});
		}
	},
	onLoad: function(option) {
		console.log(option);
		this.equip = {
			// id:option.id,
			// confirm_code: option.confirm_code,
			// do_result: option.do_result,
			// do_status: option.do_status
			...option
		};

		this.equip.confirm_code = option.confirmCode;

		// const eventChannel = this.getOpenerEventChannel();
		// // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
		// eventChannel.on('acceptDataFromOpenerPage', ret => {
		// 	this.equip = ret.data;

		api.gettaskitemlist(this.equip.id).then(res => {
			//获取明细
			this.itemList = res.data;
		});
		
		// });
		
		
		
	}
};
</script>

<style lang="less">
.task-info {
	padding: 20rpx 0;
	.task-info-item {
		padding: 10rpx 28rpx 0;
		display: flex;
		.task-info-item-title {
			margin-right: 20rpx;
			color: #666;
		}
		.task-info-item-text {
			color: #888;
		}
	}
	// border-bottom: 1px solid #ccc;
	margin-bottom: 10rpx;
	background: #fff;
	// margin-bottom: 10rpx;
}
.item-list {
	& > .item-li {
		margin-top: 10rpx;
	}
	.task-item-item {
		padding: 0;
	}
	.cu-item.task-item-item {
		& > .title {
			position: relative;
			&:after {
				content: ' ';
				position: absolute;
				bottom: 0;
				left: 0;
				box-sizing: border-box;
				width: 200%;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
				border-radius: inherit;
				transform: scale(0.5);
				transform-origin: 0;
			}
		}
		& > .text {
			// position: relative;
			height: 100rpx;
			text-align: center;
			line-height: 1.1;

			align-self: center;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			word-break: break-word;
			overflow: hidden;
			.picker {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.text-edit-tag {
			color: #0081ff;
			// position: absolute;‘
			// position:relative;
			background: transparent;
			display: inline;
			width: auto;
			margin: 0;

			right: auto;
			left: 0;
			top: 4rpx;
			// margin-top: 16rpx;
			padding-left: 0;
			padding-right: 4rpx;
			font-size: 24rpx;
			&:before {
				// content: '*';
			}
		}
	}
}
</style>
